/* import rules to make base rendering consistent for all browsers */
@import url("reset.css");
/* import layout grid */
@import url("grid.css");
/* =============================================================================
   Layout
   ========================================================================== */
.clearfix, header div, [role="main"], fieldset > div, #article-navigation ul, .textile_bar {
  *zoom: 1;
}
.clearfix:before, header div:before, [role="main"]:before, fieldset > div:before, #article-navigation ul:before, .textile_bar:before, .clearfix:after, header div:after, [role="main"]:after, fieldset > div:after, #article-navigation ul:after, .textile_bar:after {
  content: "";
  display: table;
}
.clearfix:after, header div:after, [role="main"]:after, fieldset > div:after, #article-navigation ul:after, .textile_bar:after {
  clear: both;
}

body {
  position: relative;
  color: #333333;
  background: white;
  padding: 38px 0 0;
  min-width: 320px;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  height: 36px;
  padding: 0 18px;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  border: 1px solid;
  border-color: #fabc2b #fabc2b #eca706;
  background-color: #fabc2b;
  /* Konqueror */
  background-image: -khtml-gradient(linear, left top, left bottom, from(#ffda44), to(#fabc2b));
  /* Safari4+, Chrome */
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffda44), to(#fabc2b));
  /* Safari5.1+, Chrome10+ */
  background-image: -webkit-linear-gradient(#ffda44, #fabc2b);
  /* Firefox3.6 */
  background-image: -moz-linear-gradient(#ffda44, #fabc2b);
  /* IE10 */
  background-image: -ms-linear-gradient(#ffda44, #fabc2b);
  /* Opera11.10+ */
  background-image: -o-linear-gradient(#ffda44, #fabc2b);
  /* CSS3 Compliant */
  background-image: linear-gradient(#ffda44, #fabc2b);
  /* IE7-9 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffda44',EndColorStr='#fabc2b');
  /* hack to remove any border-radius in IE9 so we can keep filter gradients */
  border-radius: 0 \0;
}
header div {
  position: relative;
}
header h1 {
  float: left;
  margin: -1px 0 0 0;
  padding-left: 166px;
  font-size: 13px;
  line-height: 36px;
  background: no-repeat left top;
  max-width: 25%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-image: url("img/textpattern-color.png");
}
@media (-webkit-min-device-pixel-ratio: 2) {
  header h1 {
    background-image: url("img/retina/textpattern-color@2x.png") !important;
    -webkit-background-size: 148px 36px;
  }
}
header h1 a {
  color: #333333;
}
header h1 a:hover {
  color: #4d4d4d;
  text-decoration: none;
}

#txp-logout {
  position: absolute;
  top: -12px;
  right: 0;
}
#txp-logout a {
  display: block;
}

footer p {
  margin-top: 0;
}
footer .pagejump {
  float: right;
}

/* =============================================================================
   Navigation
   ========================================================================== */
[role="navigation"] {
  float: left;
  overflow: visible;
}
[role="navigation"] h4 {
  display: none;
}
[role="navigation"] select {
  /* Hide select version of navigation for larger screens */
  display: none;
}

[data-dropdown="dropdown"] {
  display: block;
  float: left;
  position: relative;
  left: 0;
  margin: 0;
}
[data-dropdown="dropdown"] > li {
  display: block;
  float: left;
  border-right: 1px solid #fabc2b;
  background-color: rgba(255, 255, 255, 0.2);
}
[data-dropdown="dropdown"] > li:first-child {
  border-left: 1px solid #fabc2b;
}

[data-dropdown="dropdown"] a {
  display: block;
  float: none;
  padding: 9px 6px 9px 9px;
  text-decoration: none;
  color: #333333;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4);
}
[data-dropdown="dropdown"] a:hover, .dropdown.open [data-dropdown="dropdown"] a {
  color: black;
  text-decoration: none;
}

[data-dropdown="dropdown"] .dropdown.open > a {
  color: black;
}

[data-dropdown="dropdown"] .active > a {
  background-color: rgba(255, 255, 255, 0.2);
}
.no-rgba [data-dropdown="dropdown"] .active > a {
  background-color: #ffe477;
}

[data-dropdown="dropdown"] .dropdown-toggle:hover,
[data-dropdown="dropdown"] .dropdown.open .dropdown-toggle {
  background: rgba(255, 255, 255, 0.2);
}
.no-rgba [data-dropdown="dropdown"] .dropdown-toggle:hover, .no-rgba
[data-dropdown="dropdown"] .dropdown.open .dropdown-toggle {
  background-color: #ffdf5d;
}

[data-dropdown="dropdown"] .dropdown-toggle:after {
  width: 0;
  height: 0;
  display: inline-block;
  content: "&#8595;";
  text-indent: -9999px;
  vertical-align: top;
  margin-top: 7px;
  margin-left: 4px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #333333;
  opacity: .5;
}

[data-dropdown="dropdown"] li:hover .dropdown-toggle:after,
[data-dropdown="dropdown"] .dropdown.open .dropdown-toggle:after {
  opacity: 1;
}

[data-dropdown="dropdown"] .dropdown-menu {
  background-color: #333;
  float: left;
  display: none;
  *zoom: 1;
  position: absolute;
  top: 37px;
  z-index: 900;
  min-width: 160px;
  max-width: 220px;
  border-color: rgba(0, 0, 0, 0.2);
  border-style: solid;
  border-width: 0 1px 1px;
  border-radius: 0 0 5px 5px;
  padding: 5px 0;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.no-rgba [data-dropdown="dropdown"] .dropdown-menu {
  border-color: #999;
}

[data-dropdown="dropdown"] .dropdown-menu li {
  float: none;
  display: block;
  background-color: none;
}
[data-dropdown="dropdown"] .dropdown-menu li a {
  display: block;
  clear: both;
  padding: 4px 10px;
  line-height: 18px;
  color: #ccc;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.25);
}
[data-dropdown="dropdown"] .dropdown-menu li a:hover {
  color: #fff;
  background-color: #191919;
  /* Konqueror */
  background-image: -khtml-gradient(linear, left top, left bottom, from(#292929), to(#191919));
  /* Safari4+, Chrome */
  background-image: -webkit-gradient(linear, left top, left bottom, from(#292929), to(#191919));
  /* Safari5.1+, Chrome10+ */
  background-image: -webkit-linear-gradient(#292929, #191919);
  /* Firefox3.6 */
  background-image: -moz-linear-gradient(#292929, #191919);
  /* IE10 */
  background-image: -ms-linear-gradient(#292929, #191919);
  /* Opera11.10+ */
  background-image: -o-linear-gradient(#292929, #191919);
  /* CSS3 Compliant */
  background-image: linear-gradient(#292929, #191919);
  /* IE7-9 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#292929',EndColorStr='#191919');
  /* hack to remove any border-radius in IE9 so we can keep filter gradients */
  border-radius: 0 \0;
}

[data-dropdown="dropdown"] .dropdown-menu .active a {
  color: #fff;
}

[data-dropdown="dropdown"] .dropdown {
  position: relative;
}
[data-dropdown="dropdown"] .dropdown.open .dropdown-menu {
  display: block;
}

/* =============================================================================
   Links
   ========================================================================== */
a {
  -webkit-tap-highlight-color: rgba(0, 102, 255, 0.5);
  color: #1a428b;
  text-decoration: none;
}
a:hover {
  color: #0066ff;
  text-decoration: underline;
}

/* =============================================================================
   Typography
   ========================================================================== */
/* addresses font-family inconsistency between 'textarea' and other form elements */
body,
button,
input,
select,
textarea {
  font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
}

body {
  font-size: 13px;
  line-height: 18px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
  line-height: 1.38461538461538;
}

h1 {
  font-size: 24px;
}
h1 small {
  font-size: 18px;
  font-weight: normal;
  color: #aaa;
}

h2 {
  font-size: 21px;
  margin: 22px 0;
}

h3 {
  font-size: 18px;
}

h4 {
  margin-top: 0;
  font-size: 15px;
}

pre + h4,
ul + h4,
ol + h4,
dl + h4 {
  margin-top: 1.33em;
}

h5 {
  font-size: 13px;
}

p {
  margin: 18px 0;
}

small,
sub,
sup,
.footnote,
.pagejump,
#article-details,
#article-navigation p {
  font-size: 11px;
}

pre,
code,
.code {
  font-size: 12px;
  font-family: Cousine, Consolas, Monaco, "Courier New", monospace;
}

pre,
code,
mark {
  padding: 3px 3px 1px;
  background: #fff6d3;
  border-radius: 3px;
}

pre {
  padding: 1em 10px;
  overflow-x: auto;
  background: #fff6d3;
}

/* =============================================================================
   Embedded content
   ========================================================================== */
.thumbnail {
  float: left;
  padding: 4px;
  border: 1px solid #cccccc;
  border-radius: 5px;
  background: #fff;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.thumbnail img {
  display: block;
}
.thumbnail:hover {
  border-color: #0066ff;
  -webkit-box-shadow: 0 1px 5px rgba(0, 102, 255, 0.2);
  box-shadow: 0 1px 5px rgba(0, 102, 255, 0.2);
}
#image-group .thumbnail {
  margin-bottom: 18px;
}

/* =============================================================================
   Tables
   ========================================================================== */
table {
  width: 100%;
  margin-bottom: 18px;
}

thead th {
  position: relative;
  border: 1px solid;
  border-color: #dddddd #dddddd #c4c4c4;
  background-color: #dddddd;
  /* Konqueror */
  background-image: -khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));
  /* Safari4+, Chrome */
  background-image: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));
  /* Safari5.1+, Chrome10+ */
  background-image: -webkit-linear-gradient(#eeeeee, #dddddd);
  /* Firefox3.6 */
  background-image: -moz-linear-gradient(#eeeeee, #dddddd);
  /* IE10 */
  background-image: -ms-linear-gradient(#eeeeee, #dddddd);
  /* Opera11.10+ */
  background-image: -o-linear-gradient(#eeeeee, #dddddd);
  /* CSS3 Compliant */
  background-image: linear-gradient(#eeeeee, #dddddd);
  /* IE7-9 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee',EndColorStr='#dddddd');
  /* hack to remove any border-radius in IE9 so we can keep filter gradients */
  border-radius: 0 \0;
}
thead th a {
  display: block;
  color: #333333;
  margin-right: 12px;
}
thead th a:hover {
  color: #333333;
  text-decoration: none;
}

thead th a:after {
  position: absolute;
  top: 13px;
  right: 7px;
  z-index: 10;
  width: 0;
  height: 0;
  display: inline-block;
  text-indent: -9999px;
  vertical-align: top;
  opacity: .5;
}

thead th a:hover:after {
  opacity: 1;
}

thead th .desc:after {
  content: "&#8595;";
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #333333;
  border-bottom: 0;
}

thead th .asc:after {
  content: "&#8593;";
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 0;
  border-bottom: 4px solid #333333;
}

tbody tr:nth-of-type(2n) {
  background-color: #f7f7f7;
}

tr {
  border: 1px solid #e3e3e3;
}

th,
td {
  padding: 0.5em 9px;
}

.multi-edit {
  width: 12px;
}

/* =============================================================================
   Forms
   ========================================================================== */
fieldset {
  margin: 0 0 9px 0;
  border: 0;
  padding: 0;
  background-color: #f7f7f7;
}
fieldset > div {
  border: 1px solid #e3e3e3;
  border-top: 0;
  padding: 0 9px;
}

legend {
  display: block;
  width: 100%;
  padding: 1px 9px 0;
  font-weight: bold;
  line-height: 27px;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4);
  -webkit-box-shadow: rgba(255, 255, 255, 0.25) 0 1px 0 0 inset;
  box-shadow: rgba(255, 255, 255, 0.25) 0 1px 0 0 inset;
  border: 1px solid;
  border-color: #dddddd #dddddd #c4c4c4;
  background-color: #dddddd;
  /* Konqueror */
  background-image: -khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));
  /* Safari4+, Chrome */
  background-image: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));
  /* Safari5.1+, Chrome10+ */
  background-image: -webkit-linear-gradient(#eeeeee, #dddddd);
  /* Firefox3.6 */
  background-image: -moz-linear-gradient(#eeeeee, #dddddd);
  /* IE10 */
  background-image: -ms-linear-gradient(#eeeeee, #dddddd);
  /* Opera11.10+ */
  background-image: -o-linear-gradient(#eeeeee, #dddddd);
  /* CSS3 Compliant */
  background-image: linear-gradient(#eeeeee, #dddddd);
  /* IE7-9 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee',EndColorStr='#dddddd');
  /* hack to remove any border-radius in IE9 so we can keep filter gradients */
  border-radius: 0 \0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* add margins to right of inline checkbox, ensure no linebreak between input and label */
.checkbox span {
  margin-right: 9px;
  display: inline-block;
  *display: inline;
  *zoom: 1;
}
.checkbox span:last-of-type, .checkbox span:last-of-type {
  margin-right: 0;
}

/* remove radio button list styling, ensure no linebreak between input and label */
.radio {
  list-style: none;
  padding-left: 0;
  margin-bottom: 15px;
}
.radio li {
  margin: 2px 0;
}

/* delete buttons */
.delete {
  float: right;
  position: relative;
  margin-left: 27px;
}
.delete input {
  position: absolute;
  right: 0;
  height: 19px;
  padding: 0 4px;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.25);
  border: 1px solid;
  border-color: #9d261d #9d261d #721c15;
  background-color: #9d261d;
  /* Konqueror */
  background-image: -khtml-gradient(linear, left top, left bottom, from(#dc4e44), to(#9d261d));
  /* Safari4+, Chrome */
  background-image: -webkit-gradient(linear, left top, left bottom, from(#dc4e44), to(#9d261d));
  /* Safari5.1+, Chrome10+ */
  background-image: -webkit-linear-gradient(#dc4e44, #9d261d);
  /* Firefox3.6 */
  background-image: -moz-linear-gradient(#dc4e44, #9d261d);
  /* IE10 */
  background-image: -ms-linear-gradient(#dc4e44, #9d261d);
  /* Opera11.10+ */
  background-image: -o-linear-gradient(#dc4e44, #9d261d);
  /* CSS3 Compliant */
  background-image: linear-gradient(#dc4e44, #9d261d);
  /* IE7-9 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#dc4e44',EndColorStr='#9d261d');
  /* hack to remove any border-radius in IE9 so we can keep filter gradients */
  border-radius: 0 \0;
}
.delete input:hover {
  border: 1px solid;
  border-color: #c83025 #c83025 #9d261d;
  background-color: #c83025;
  /* Konqueror */
  background-image: -khtml-gradient(linear, left top, left bottom, from(#e36f66), to(#c83025));
  /* Safari4+, Chrome */
  background-image: -webkit-gradient(linear, left top, left bottom, from(#e36f66), to(#c83025));
  /* Safari5.1+, Chrome10+ */
  background-image: -webkit-linear-gradient(#e36f66, #c83025);
  /* Firefox3.6 */
  background-image: -moz-linear-gradient(#e36f66, #c83025);
  /* IE10 */
  background-image: -ms-linear-gradient(#e36f66, #c83025);
  /* Opera11.10+ */
  background-image: -o-linear-gradient(#e36f66, #c83025);
  /* CSS3 Compliant */
  background-image: linear-gradient(#e36f66, #c83025);
  /* IE7-9 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#e36f66',EndColorStr='#c83025');
  /* hack to remove any border-radius in IE9 so we can keep filter gradients */
  border-radius: 0 \0;
}
.delete input:active {
  border: 1px solid;
  border-color: #e36f66 #e36f66 #db463b;
  background-color: #e36f66;
  /* Konqueror */
  background-image: -khtml-gradient(linear, left top, left bottom, from(#c83025), to(#e36f66));
  /* Safari4+, Chrome */
  background-image: -webkit-gradient(linear, left top, left bottom, from(#c83025), to(#e36f66));
  /* Safari5.1+, Chrome10+ */
  background-image: -webkit-linear-gradient(#c83025, #e36f66);
  /* Firefox3.6 */
  background-image: -moz-linear-gradient(#c83025, #e36f66);
  /* IE10 */
  background-image: -ms-linear-gradient(#c83025, #e36f66);
  /* Opera11.10+ */
  background-image: -o-linear-gradient(#c83025, #e36f66);
  /* CSS3 Compliant */
  background-image: linear-gradient(#c83025, #e36f66);
  /* IE7-9 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#c83025',EndColorStr='#e36f66');
  /* hack to remove any border-radius in IE9 so we can keep filter gradients */
  border-radius: 0 \0;
}

/* primary buttons */
input[type="submit"].button-primary {
  font-weight: bold;
  border: 1px solid;
  border-color: #f2ab05 #f2ab05 #c08804;
  background-color: #f2ab05;
  /* Konqueror */
  background-image: -khtml-gradient(linear, left top, left bottom, from(#ffdf5b), to(#f2ab05));
  /* Safari4+, Chrome */
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffdf5b), to(#f2ab05));
  /* Safari5.1+, Chrome10+ */
  background-image: -webkit-linear-gradient(#ffdf5b, #f2ab05);
  /* Firefox3.6 */
  background-image: -moz-linear-gradient(#ffdf5b, #f2ab05);
  /* IE10 */
  background-image: -ms-linear-gradient(#ffdf5b, #f2ab05);
  /* Opera11.10+ */
  background-image: -o-linear-gradient(#ffdf5b, #f2ab05);
  /* CSS3 Compliant */
  background-image: linear-gradient(#ffdf5b, #f2ab05);
  /* IE7-9 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffdf5b',EndColorStr='#f2ab05');
  /* hack to remove any border-radius in IE9 so we can keep filter gradients */
  border-radius: 0 \0;
}
input[type="submit"].button-primary:hover {
  border: 1px solid;
  border-color: #fbbe2f #fbbe2f #f2ab05;
  background-color: #fbbe2f;
  /* Konqueror */
  background-image: -khtml-gradient(linear, left top, left bottom, from(#ffe98e), to(#fbbe2f));
  /* Safari4+, Chrome */
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffe98e), to(#fbbe2f));
  /* Safari5.1+, Chrome10+ */
  background-image: -webkit-linear-gradient(#ffe98e, #fbbe2f);
  /* Firefox3.6 */
  background-image: -moz-linear-gradient(#ffe98e, #fbbe2f);
  /* IE10 */
  background-image: -ms-linear-gradient(#ffe98e, #fbbe2f);
  /* Opera11.10+ */
  background-image: -o-linear-gradient(#ffe98e, #fbbe2f);
  /* CSS3 Compliant */
  background-image: linear-gradient(#ffe98e, #fbbe2f);
  /* IE7-9 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffe98e',EndColorStr='#fbbe2f');
  /* hack to remove any border-radius in IE9 so we can keep filter gradients */
  border-radius: 0 \0;
}
input[type="submit"].button-primary:active {
  border: 1px solid;
  border-color: #ffe98e #ffe98e #ffdf5b;
  background-color: #ffe98e;
  /* Konqueror */
  background-image: -khtml-gradient(linear, left top, left bottom, from(#fbbe2f), to(#ffe98e));
  /* Safari4+, Chrome */
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fbbe2f), to(#ffe98e));
  /* Safari5.1+, Chrome10+ */
  background-image: -webkit-linear-gradient(#fbbe2f, #ffe98e);
  /* Firefox3.6 */
  background-image: -moz-linear-gradient(#fbbe2f, #ffe98e);
  /* IE10 */
  background-image: -ms-linear-gradient(#fbbe2f, #ffe98e);
  /* Opera11.10+ */
  background-image: -o-linear-gradient(#fbbe2f, #ffe98e);
  /* CSS3 Compliant */
  background-image: linear-gradient(#fbbe2f, #ffe98e);
  /* IE7-9 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fbbe2f',EndColorStr='#ffe98e');
  /* hack to remove any border-radius in IE9 so we can keep filter gradients */
  border-radius: 0 \0;
}

/* textarea heights */
textarea.medium {
  min-height: 160px;
}
textarea.large {
  min-height: 400px;
}

/* =============================================================================
   Modal boxes (note: width/height defined in grid.css)
   ========================================================================== */
#modal-overlay {
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .66;
  /* IE Fix */
  zoom: 1;
  filter: alpha(opacity=66);
}

#modal-loader {
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  border: 5px solid #fff;
  border-radius: 5px;
  background-image: url("img/spinner.gif");
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}
@media (-webkit-min-device-pixel-ratio: 2) {
  #modal-loader {
    background-image: url("img/retina/spinner@2x.gif") !important;
    -webkit-background-size: 24px 24px;
  }
}

#modal-window {
  position: fixed;
  z-index: 10001;
  background: #fff;
  -webkit-box-shadow: 0 0 80px rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.4);
}

#modal-window-inner {
  width: 100%;
  height: 100%;
}

#modal-iframe {
  width: 100%;
  height: 100%;
  background: #fff no-repeat 50% 50%;
  background-image: url("img/spinner.gif");
}
@media (-webkit-min-device-pixel-ratio: 2) {
  #modal-iframe {
    background-image: url("img/retina/spinner@2x.gif") !important;
    -webkit-background-size: 24px 24px;
  }
}

.modal-window-close {
  position: absolute;
  top: -16px;
  right: -16px;
  z-index: 10050;
  display: block;
  width: 32px;
  height: 32px;
  text-indent: -9999px;
  background: no-repeat left top;
  background-image: url("img/close.png");
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .modal-window-close {
    background-image: url("img/retina/close@2x.png") !important;
    -webkit-background-size: 32px 32px;
  }
}
.modal-window-close:hover {
  background-position: left bottom;
}

/* =============================================================================
   Login/reset password page
   ========================================================================== */
#page-login [role="main"],
#page-reset_password [role="main"] {
  width: 284px;
  margin: 0 auto;
  border-radius: 10px;
  background: #fff;
  -webkit-box-shadow: 0 0 80px #bbbbbb;
  box-shadow: 0 0 80px #bbbbbb;
}
#page-login h1,
#page-reset_password h1 {
  width: 264px;
  height: 53px;
  margin: 18px 10px;
  text-indent: -9999px;
  background-image: url("img/textpattern-color-lrg.png");
}
@media (-webkit-min-device-pixel-ratio: 2) {
  #page-login h1,
  #page-reset_password h1 {
    background-image: url("img/retina/textpattern-color-lrg@2x.png") !important;
    -webkit-background-size: 264px 53px;
  }
}
#page-login form,
#page-reset_password form {
  margin-bottom: 18px;
  border: 1px solid #e3e3e3;
  padding: 0 9px;
  background-color: #f7f7f7;
}
#page-login form input[type="text"], #page-login form input[type="password"],
#page-reset_password form input[type="text"],
#page-reset_password form input[type="password"] {
  width: 100%;
}

.forgot-password {
  float: right;
  margin-top: 3px;
}

.return-to-site {
  width: 284px;
  margin: 18px auto;
}

/* =============================================================================
   Write page
   ========================================================================== */
#article-content-main .doc-outline {
  display: none;
}
#article-content-main .title input {
  width: 100%;
}

.stub {
  float: right;
  margin: 0 0 0 4px;
  padding: 0 8px;
  border: 1px solid;
  border-color: #dddddd #dddddd #c4c4c4;
  background-color: #dddddd;
  /* Konqueror */
  background-image: -khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));
  /* Safari4+, Chrome */
  background-image: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));
  /* Safari5.1+, Chrome10+ */
  background-image: -webkit-linear-gradient(#eeeeee, #dddddd);
  /* Firefox3.6 */
  background-image: -moz-linear-gradient(#eeeeee, #dddddd);
  /* IE10 */
  background-image: -ms-linear-gradient(#eeeeee, #dddddd);
  /* Opera11.10+ */
  background-image: -o-linear-gradient(#eeeeee, #dddddd);
  /* CSS3 Compliant */
  background-image: linear-gradient(#eeeeee, #dddddd);
  /* IE7-9 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee',EndColorStr='#dddddd');
  /* hack to remove any border-radius in IE9 so we can keep filter gradients */
  border-radius: 0 \0;
  -webkit-box-shadow: rgba(255, 255, 255, 0.25) 0 1px 0 0 inset;
  box-shadow: rgba(255, 255, 255, 0.25) 0 1px 0 0 inset;
  border-bottom: 0;
  font-size: 11px;
  line-height: 17px;
  text-transform: uppercase;
  border-radius: 5px 5px 0 0;
}
.stub a {
  color: #333333;
  padding: 0 1px;
}
.stub .active {
  background: #fff6d3;
}

/* Style article nav links */
#article-navigation {
  border: 1px solid #e3e3e3;
  padding: 2px 9px;
  background-color: #f7f7f7;
}
#article-navigation h4 {
  display: none;
}
#article-navigation p {
  float: right;
  margin: 3px 0;
}
#article-navigation ul {
  margin: 0;
  padding: 0;
}
#article-navigation li {
  float: left;
}
#article-navigation a {
  display: block;
}

#article-view {
  margin-right: 4px;
}

#article-navigation #article-prev,
#list-prev {
  border-radius: 5px 0 0 5px;
  border-right: 0;
}

#article-navigation #article-next,
#list-next {
  border-radius: 0 5px 5px 0;
}

#article-new {
  margin-left: 4px;
}

/* Reintroduce list-style on recent articles nav list */
#article-recent ol {
  list-style: decimal;
}

/* =============================================================================
   Textile bar
   ========================================================================== */
.textile_bar {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  width: 100%;
  padding: 2px;
  margin-bottom: -6px;
  z-index: 10;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid;
  border-color: #dddddd #dddddd #c4c4c4;
  background-color: #dddddd;
  /* Konqueror */
  background-image: -khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));
  /* Safari4+, Chrome */
  background-image: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));
  /* Safari5.1+, Chrome10+ */
  background-image: -webkit-linear-gradient(#eeeeee, #dddddd);
  /* Firefox3.6 */
  background-image: -moz-linear-gradient(#eeeeee, #dddddd);
  /* IE10 */
  background-image: -ms-linear-gradient(#eeeeee, #dddddd);
  /* Opera11.10+ */
  background-image: -o-linear-gradient(#eeeeee, #dddddd);
  /* CSS3 Compliant */
  background-image: linear-gradient(#eeeeee, #dddddd);
  /* IE7-9 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee',EndColorStr='#dddddd');
  /* hack to remove any border-radius in IE9 so we can keep filter gradients */
  border-radius: 0 \0;
}

.textile_bar span {
  float: left;
  display: inline-block;
  *display: inline;
  *zoom: 1;
  border: 1px solid #ccc;
  color: #333;
  height: 24px;
  width: 24px;
  cursor: pointer;
  text-indent: -9999px;
  background-color: #fff;
  background-image: url("img/textile_bar.png");
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .textile_bar span {
    background-image: url("img/retina/textile_bar@2x.png") !important;
    -webkit-background-size: 504px 24px;
  }
}

.textile_bar span:hover {
  background-color: #fff6d3;
}

.textile_strong {
  background-position: 0 0;
}

.textile_em {
  background-position: -24px 0;
}

.textile_h1 {
  background-position: -48px 0;
}

.textile_h2 {
  background-position: -72px 0;
}

.textile_h3 {
  background-position: -96px 0;
}

.textile_h4 {
  background-position: -120px 0;
}

.textile_h5 {
  background-position: -144px 0;
}

.textile_h6 {
  background-position: -168px 0;
}

.textile_ins {
  background-position: -192px 0;
}

.textile_del {
  background-position: -216px 0;
}

.textile_link {
  background-position: -240px 0;
}

.textile_img {
  background-position: -264px 0;
}

.textile_ul {
  background-position: -288px 0;
}

.textile_ol {
  background-position: -312px 0;
}

.textile_sup {
  background-position: -336px 0;
}

.textile_sub {
  background-position: -360px 0;
}

.textile_bq {
  background-position: -384px 0;
}

.textile_bc {
  background-position: -408px 0;
}

.textile_code {
  background-position: -432px 0;
}

.textile_abbr {
  background-position: -456px 0;
}

/* =============================================================================
   Sections page
   ========================================================================== */
#page-section .delete input {
  margin: 6px;
}

/* =============================================================================
   !TO SORT!
   ========================================================================== */
.txp-content-switcher h5 {
  display: block;
  width: 100%;
  margin: 0;
  padding: 1px 9px 0;
  font-size: 13px;
  font-weight: bold;
  line-height: 27px;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4);
  -webkit-box-shadow: rgba(255, 255, 255, 0.25) 0 1px 0 0 inset;
  box-shadow: rgba(255, 255, 255, 0.25) 0 1px 0 0 inset;
  border: 1px solid;
  border-color: #dddddd #dddddd #c4c4c4;
  background-color: #dddddd;
  /* Konqueror */
  background-image: -khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));
  /* Safari4+, Chrome */
  background-image: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd));
  /* Safari5.1+, Chrome10+ */
  background-image: -webkit-linear-gradient(#eeeeee, #dddddd);
  /* Firefox3.6 */
  background-image: -moz-linear-gradient(#eeeeee, #dddddd);
  /* IE10 */
  background-image: -ms-linear-gradient(#eeeeee, #dddddd);
  /* Opera11.10+ */
  background-image: -o-linear-gradient(#eeeeee, #dddddd);
  /* CSS3 Compliant */
  background-image: linear-gradient(#eeeeee, #dddddd);
  /* IE7-9 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee',EndColorStr='#dddddd');
  /* hack to remove any border-radius in IE9 so we can keep filter gradients */
  border-radius: 0 \0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.txp-content-switcher ul {
  margin: 0 0 9px;
  padding: 0;
  background-color: #fff;
  list-style: none;
}
#page-page .txp-content-switcher ul, #page-css .txp-content-switcher ul {
  border-top: 1px solid #e3e3e3;
}
.txp-content-switcher li {
  padding: 0.3em 9px;
  border: 1px solid #e3e3e3;
  border-top: 0;
}
.txp-content-switcher li:nth-of-type(2n) {
  background-color: #f7f7f7;
}
.primary ul {
  list-style-type:none;
}
.primary li {
  margin:0 0 4px;
}
.sublist {
  padding:0;
}
.sublist li {
  display:inline;
}

[role="main"] .dropdown-toggle {
  display: block;
  color: #333333;
  text-decoration: none;
}

[role="main"] .dropdown-toggle:after {
  float: right;
  width: 0;
  height: 0;
  display: inline-block;
  content: "&#8595;";
  text-indent: -9999px;
  vertical-align: top;
  margin-top: 11px;
  margin-left: 4px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #333333;
  border-bottom: 0;
  opacity: .5;
}

[role="main"] a:hover.dropdown-toggle:after {
  opacity: 1;
}

[role="main"] .dropdown-toggle.dropdown-toggle-open:after {
  content: "&#8593;";
  margin-top: 11px;
  margin-left: 4px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 0;
  border-bottom: 4px solid #333333;
  opacity: .5;
}

.dropdown-pane {
  display: none;
}

/* form errors */
label.error {
  background: #ffc;
  color: #c00;
  font-style: italic;
}

input.error,
select.error,
textarea.error {
  background-color: #fee;
}

/* close icon */
.close {
  float: right;
  position: relative;
  text-decoration: none;
  color: rgba(51, 51, 51, 0.6);
  font-size: 18px;
  font-weight: bold;
  line-height: 15px;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.25);
  margin-left: 9px;
  padding-bottom: 5px;
}
.close:hover {
  color: #333333;
  text-decoration: none;
  color: rgba(51, 51, 51, 0.8);
}

/* alert colours */
.success {
  background-color: #46a546;
}

.warning {
  background-color: #ff9900;
}

.error {
  background-color: #9d261d;
}

/* alert boxes */
[role="alert"] {
  border-radius: 5px;
  padding: 7px 15px;
  margin-bottom: 18px;
  max-width: 700px;
  -webkit-box-shadow: rgba(255, 255, 255, 0.25) 0 1px 0 0 inset;
  box-shadow: rgba(255, 255, 255, 0.25) 0 1px 0 0 inset;
}
[role="alert"].warning {
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.4);
  border: 1px solid;
  border-color: #ffad33 #ffad33 #ff9900;
  background-color: #ffad33;
  /* Konqueror */
  background-image: -khtml-gradient(linear, left top, left bottom, from(#ffd699), to(#ffad33));
  /* Safari4+, Chrome */
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffd699), to(#ffad33));
  /* Safari5.1+, Chrome10+ */
  background-image: -webkit-linear-gradient(#ffd699, #ffad33);
  /* Firefox3.6 */
  background-image: -moz-linear-gradient(#ffd699, #ffad33);
  /* IE10 */
  background-image: -ms-linear-gradient(#ffd699, #ffad33);
  /* Opera11.10+ */
  background-image: -o-linear-gradient(#ffd699, #ffad33);
  /* CSS3 Compliant */
  background-image: linear-gradient(#ffd699, #ffad33);
  /* IE7-9 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffd699',EndColorStr='#ffad33');
  /* hack to remove any border-radius in IE9 so we can keep filter gradients */
  border-radius: 0 \0;
}
[role="alert"].success, [role="alert"].error, [role="alert"].delete {
  color: white;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.25);
}
[role="alert"].success {
  border: 1px solid;
  border-color: #46a546 #46a546 #378137;
  background-color: #46a546;
  /* Konqueror */
  background-image: -khtml-gradient(linear, left top, left bottom, from(#86cb86), to(#46a546));
  /* Safari4+, Chrome */
  background-image: -webkit-gradient(linear, left top, left bottom, from(#86cb86), to(#46a546));
  /* Safari5.1+, Chrome10+ */
  background-image: -webkit-linear-gradient(#86cb86, #46a546);
  /* Firefox3.6 */
  background-image: -moz-linear-gradient(#86cb86, #46a546);
  /* IE10 */
  background-image: -ms-linear-gradient(#86cb86, #46a546);
  /* Opera11.10+ */
  background-image: -o-linear-gradient(#86cb86, #46a546);
  /* CSS3 Compliant */
  background-image: linear-gradient(#86cb86, #46a546);
  /* IE7-9 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#86cb86',EndColorStr='#46a546');
  /* hack to remove any border-radius in IE9 so we can keep filter gradients */
  border-radius: 0 \0;
}
[role="alert"].error, [role="alert"].delete {
  border: 1px solid;
  border-color: #9d261d #9d261d #721c15;
  background-color: #9d261d;
  /* Konqueror */
  background-image: -khtml-gradient(linear, left top, left bottom, from(#dc4e44), to(#9d261d));
  /* Safari4+, Chrome */
  background-image: -webkit-gradient(linear, left top, left bottom, from(#dc4e44), to(#9d261d));
  /* Safari5.1+, Chrome10+ */
  background-image: -webkit-linear-gradient(#dc4e44, #9d261d);
  /* Firefox3.6 */
  background-image: -moz-linear-gradient(#dc4e44, #9d261d);
  /* IE10 */
  background-image: -ms-linear-gradient(#dc4e44, #9d261d);
  /* Opera11.10+ */
  background-image: -o-linear-gradient(#dc4e44, #9d261d);
  /* CSS3 Compliant */
  background-image: linear-gradient(#dc4e44, #9d261d);
  /* IE7-9 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#dc4e44',EndColorStr='#9d261d');
  /* hack to remove any border-radius in IE9 so we can keep filter gradients */
  border-radius: 0 \0;
}
[role="alert"] h4 {
  display: none;
}
[role="alert"] p {
  margin: 0;
}

.fade {
  -webkit-transition: opacity 0.15s linear;
  -moz-transition: opacity 0.15s linear;
  -ms-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
  opacity: 0;
}
.fade.in {
  opacity: 1;
}

/* =============================================================================
   Additional layout for screen media < 1226px
   ========================================================================== */
@media only screen and (max-width: 1225px) {
  /* smaller logo for smaller screens */
  header {
    height: 36px;
  }
  header h1 {
    padding-left: 74px;
    line-height: 36px;
    background-image: url("img/txp-color.png");
  }
}
@media only screen and (max-width: 1225px) and (-webkit-min-device-pixel-ratio: 2) {
  header h1 {
    background-image: url("img/retina/txp-color@2x.png") !important;
    -webkit-background-size: 56px 36px;
  }
}

/* =============================================================================
   Additional layout for screen media < 1024px
   ========================================================================== */
@media only screen and (max-width: 1023px) {
  header h1 {
    max-width: 18%;
  }
}
/* =============================================================================
   Additional layout for screen media < 768px
   ========================================================================== */
@media only screen and (max-width: 767px) {
  /* remove top padding since header is non-fixed */
  body {
    padding: 0;
  }

  /* smaller logo for smaller screens, and non-fixed header */
  header {
    position: static;
    height: 36px;
  }
  header h1 {
    line-height: 36px;
    padding-left: 33px;
    padding-bottom: 1px;
    max-width: 60%;
    background-image: url("img/x-color.png");
  }
  #txp-logout {
    top: -11px;
  }

  /* show select version of navigation for smaller screens (and hide list version) */
  [role="navigation"] {
    position: absolute;
    top: 38px;
    right: -18px;
    left: -18px;
    border-top: 1px solid #fffbec;
    padding: 6px 18px;
    background: #fff6d3;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  }
  [role="navigation"] ul {
    display: none;
  }
  [role="navigation"] h4 {
    display: inline;
    font-size: 13px;
  }
  [role="navigation"] select {
    display: inline;
    margin-left: 9px;
  }

  [role="main"] {
    margin-top: 36px;
  }

  /* force table to not be like tables anymore */
  table,
  thead,
  tbody,
  tfoot,
  th,
  td,
  tr {
    display: block;
  }

  /* hide table headers (but not via display:none; for accessibility) */
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  tr {
    margin-bottom: 2px;
  }
  tr:last-of-type {
    margin-bottom: 18px;
  }

  th,
  td {
    position: relative;
    border: 0;
    padding: 0.25em 9px 0.25em 50%;
  }
  th:before,
  td:before {
    /* display label from data-label attribute */
    position: absolute;
    top: .25em;
    left: .5em;
    width: 45%;
    white-space: nowrap;
    content: attr(data-label);
  }

  /* =============================================================================
     Write page
     ========================================================================== */
  #article-navigation p {
    float: none;
  }
  #article-navigation ul {
    margin-bottom: 6px;
  }
}
@media only screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 2) {
  header h1 {
    background-image: url("img/retina/x-color@2x.png") !important;
    -webkit-background-size: 24px 36px;
  }
}